<template>
    <el-row :gutter="10">
      <el-col :xs="2" :sm="6" :md="6" :lg="6" :xl="6"></el-col>
      <el-col :xs="20" :sm="12" :md="12" :lg="12" :xl="12">
  
        <div class="login">
          <h2>企业注册</h2>
          <el-form
          :size="'large'"
          ref="regForm"
          :model="regForm"
          :rules="rules"
          @keyup.enter="submitForm">
            <el-form-item prop="username">
              <el-input v-model="regForm.username" placeholder="用户名" />
            </el-form-item>
            <el-form-item prop="enterprise">
              <el-input v-model="regForm.enterprise" placeholder="企业全称" />
            </el-form-item>
            <el-form-item prop="projects">
              <el-input v-model="regForm.projects" placeholder="主营项目" />
            </el-form-item>
            <el-form-item prop="contacts">
              <el-input v-model="regForm.contacts" placeholder="联系人" />
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="regForm.password" type="password" placeholder="密码" />
            </el-form-item>
            <el-form-item prop="password2">
              <el-input v-model="regForm.password2" type="password" placeholder="确认密码" />
            </el-form-item>
            <el-button class="btn" @click="submitForm" :loading="loading">注册</el-button>
        </el-form>
      </div>
    </el-col>
    <el-col :xs="2" :sm="6" :md="6" :lg="6" :xl="6"></el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      regForm: {
        username: "",
        enterprise: "",
        projects: "",
        contacts: "",
        password: "",
        password2: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {min:3,max:20,message:'用户名长度在3到20个字符之间',trigger:'blur'}
        ],
        enterprise: [
          { required: true, message: "请输入企业全称", trigger: "blur" }
        ],
        projects: [
          { required: true, message: "请输入主营项目", trigger: "blur" }
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {min:6,max:20,message:'密码长度在6到20个字符之间',trigger:'blur'}
        ],
        password2: [
        { required: true, message: "请输入确认密码", trigger: "blur" },
        { 
              validator: (rule, value, callback) => { 
                if (value !== this.regForm.password) {
                  callback(new Error("两次输入的密码不一致"));
                } else {
                  callback();
                }
              },
              trigger: "blur" 
            }
          ]
      }
    }
  },
  methods:{
    submitForm(){
      this.$refs.regForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.register();
        }else{
            this.$message.error('请完善表单信息');
            return false;
        }
    })
  },
  register(){ 
    setTimeout(()=>{
        this.$message.success('注册成功!');
        this.loading = false;
        this.$router.push('/');
        this.$refs.regForm.resetFields();
    },1000);
}
}

}

</script>
<style scoped>
.login{width: 90%;padding: 100px 30px;box-shadow: 0px 0px 10px#999;border-radius:10px;margin: 50px auto;}
.login h2{text-align: center;font-size: 30px;margin: 10px 0px;}
.login .el-input{margin: 10px 0px;}
button.el-button{width: 100% !important;height: 50px;background-color: #000;color: #fff;margin: 20px 0px;}
#login .el-form-item--large .el-form-item__label{height: 55px !important;line-height: 55px !important;}
</style>